import React, { useRef, useState } from 'react';
import type { ActionType } from '@ant-design/pro-table';
import { message, Tag, Space, Modal, Drawer } from 'antd';
import ProList from '@ant-design/pro-list';
import type { ProColumns } from '@ant-design/pro-table';
import { deleteUsingPOST1, selectUsingPOST2, updateUsingPOST1 } from '@/services/test/Post';
import moment from 'moment';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import ProDescriptions from '@ant-design/pro-descriptions';

const Index: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [showDetail, setShowDetail] = useState<boolean>(false);
  const [currentRow, setCurrentRow] = useState<any>();

  const desColumn: ProColumns<any>[] = [
    {
      title: '岗位名称',
      dataIndex: 'name',
    },
    {
      title: '所属院部',
      dataIndex: 'college',
    },
    {
      title: '招聘人数',
      dataIndex: 'number',
    },
    {
      title: '学历要求',
      dataIndex: 'education',
    },
    {
      title: '学位要求',
      dataIndex: 'degree',
    },
    {
      title: '职位描述',
      dataIndex: 'description',
      search: false,
    },
    {
      title: '职位要求',
      dataIndex: 'require',
    },
  ];

  const onPass = (values: any) => {
    Modal.confirm({
      title: '您确认要通过该条招聘计划吗?',
      icon: <ExclamationCircleOutlined />,
      content: '通过后不可恢复，会立即发布该条岗位，请谨慎决定',
      onOk: async () => {
        await updateUsingPOST1({ id: values, valid: true }).then(() => {
          message.success('通过成功');
          actionRef.current?.reload();
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };

  const onDelete = (values: any) => {
    Modal.confirm({
      title: '您确认要删除该条信息吗?',
      icon: <ExclamationCircleOutlined />,
      content: '删除后不可恢复，请谨慎决定',
      onOk: async () => {
        await deleteUsingPOST1({ id: values }).then(() => {
          message.success('删除成功');
          actionRef.current?.reload();
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };

  // 获取还未通过的岗位信息
  const getList = async (params?: any) => {
    const res = await selectUsingPOST2({ ...params, valid: false });
    return res;
  };

  return (
    <>
      <ProList<any>
        search={{}}
        rowKey="id"
        request={getList}
        actionRef={actionRef}
        pagination={{
          pageSize: 10,
        }}
        onRow={(record: any) => {
          return {
            onClick: () => {
              setShowDetail(true);
              setCurrentRow(record);
            },
          };
        }}
        metas={{
          title: {
            dataIndex: 'name',
            title: '岗位名称',
          },
          description: {
            render: (text: any, record: any) => {
              return (
                <div>
                  {record.education} | {record.degree}
                </div>
              );
            },
            search: false,
          },
          subTitle: {
            render: (text: any, record: any) => {
              return (
                <Space size={0}>
                  <Tag color="blue">{record.college}</Tag>
                  <Tag color="#5BD8A6">招{record.number}人</Tag>
                </Space>
              );
            },
            search: false,
          },
          actions: {
            render: (text, row) => [
              <a
                href={row.url}
                target="_blank"
                rel="noopener noreferrer"
                key="delete"
                onClick={() => onPass(row.id)}
              >
                通过
              </a>,
              <a key="delete" onClick={() => onDelete(row.id)}>
                删除
              </a>,
              <a
                key="view"
                onClick={() => {
                  setShowDetail(true);
                  setCurrentRow(row);
                }}
              >
                查看详情
              </a>,
            ],
            search: false,
          },
          college: {
            // 自己扩展的字段，主要用于筛选，不在列表中显示
            title: '学院',
            valueType: 'select',
            valueEnum: {
              信息与控制学院: { text: '信息与控制学院' },
              纺织服装学院: { text: '纺织服装学院' },
              经济管理学院: { text: '经济管理学院' },
              艺术与设计学院: { text: '艺术与设计学院' },
              人文与国际交流学院: { text: '人文与国际交流学院' },
              建筑工程学院: { text: '建筑工程学院' },
              后勤类: { text: '后勤类' },
            },
          },
        }}
      />
      <Drawer
        width={600}
        visible={showDetail}
        onClose={() => {
          setCurrentRow(undefined);
          setShowDetail(false);
        }}
        closable={false}
      >
        {currentRow?.id && (
          <>
            <ProDescriptions
              column={1}
              title={'岗位信息'}
              request={async () => ({
                data: currentRow || {},
              })}
              columns={desColumn}
              style={{ whiteSpace: 'pre-wrap' }}
              bordered
            >
              <ProDescriptions.Item label={'投递时间'}>
                {moment(currentRow?.startTime).format('YYYY-MM-DD')}-
                {moment(currentRow?.deadline).format('YYYY-MM-DD')}
              </ProDescriptions.Item>

              {/* TODO 改成人名或者删除 */}
              {/* <ProDescriptions.Item label={'创建人'}>{currentRow?.utcCreate}</ProDescriptions.Item> */}
            </ProDescriptions>
          </>
        )}
      </Drawer>
    </>
  );
};

export default Index;
